<!-- 订单详情 -->
<template>
	<view class="orderDetailsPage" :class="info.apStatus == 0 ? 'safeBottom' : 'pb-15'">
		<view v-if="info.apStatus == 0" class="px-15 py-13 tc u-warning-bg">
			<view class="fw-7">{{ sonStatusFind(info.apStatus, "label") }}</view>
			<view class="fz-12 pt-4">已等待: {{awaitTime(info.applyDate).desc }}</view>
		</view>

		<view class="disFlxJS linh-44 px-15 fz-16 color8 borderB">
			<view>审核状态：</view>
			<view :style="'color: ' + sonStatusFind(info.apStatus, 'colors')">{{
				sonStatusFind(info.apStatus, "label")
			}}</view>
		</view>

    <!-- 已审核显示审核详情 -->
		<view v-if="info.apStatus != 0" class="py-10">
			<view class="disFlxJS linh-26 px-15">
				<view class="shrink0 pr-50">审核机构</view>
				<view>{{ info.apExpertCompanyName }}</view>
			</view>
			<view class="disFlxJS linh-26 px-15">
				<view class="shrink0 pr-50">审核医生</view>
				<view>{{ info.apExpertName }}</view>
			</view>
			<view class="disFlxJS linh-26 px-15">
				<view class="shrink0 pr-50">医生签名</view>
				<image :src="info.prescriptionSign" style="width:200rpx;height:auto;" mode="widthFix" />
			</view>
			<view class="disFlxJS linh-26 px-15">
				<view class="shrink0 pr-50">审核时间</view>
				<view>{{ info.apDate || "" }}</view>
			</view>
			<view v-if="info.apRemark" class="disFlxJS linh-26 px-15">
				<view class="shrink0 pr-50">审核备注</view>
				<view>{{ info.apRemark }}</view>
			</view>
		</view>

		<view class="py-10" :class="{'borderTop30': info.apStatus != 0}">
      <view class="disFlxJS linh-26 px-15">
				<view class="shrink0 pr-50">申请机构</view>
				<view>{{ info.applyCompanyName }}</view>
			</view>
      <view class="disFlxJS linh-26 px-15">
				<view class="shrink0 pr-50">申请医生</view>
				<view>{{ info.applyExpertName }}</view>
			</view>
      <view class="disFlxJS linh-26 px-15">
				<view class="shrink0 pr-50">申请时间</view>
				<view>{{ info.applyDate }}</view>
			</view>
		</view>

		<view class="py-10 borderTop30">
			<view class="disFlxJS linh-26 px-15">
				<view class="shrink0 pr-50">患者信息</view>
				<view>
					<text>{{ info.patientName }}</text>
					<text class="pl-5">{{ info.patientSex == 1 ? "女" : "男" }}</text>
					<text class="pl-5">{{ info.patientAge }}岁</text>
				</view>
			</view>
			<view class="disFlxJS linh-26 px-15">
				<view class="shrink0 pr-50">患者主诉</view>
				<view>{{ info.patientPrincipal }}</view>
			</view>
			<view class="disFlxJS linh-26 px-15 mt-10" style="align-items: start">
				<view class="shrink0 pr-50">舌部舌苔</view>
				<view>
					<image :src="info.furImg" style="width: 200rpx" mode="widthFix" @click="openPreview(info.furImg)" />
				</view>
			</view>
			<view class="disFlxJS linh-26 px-15 mt-10" style="align-items: start">
				<view class="shrink0 pr-50">面部面相</view>
				<view>
					<image :src="info.faceImg" style="width: 200rpx" mode="widthFix" @click="openPreview(info.faceImg)" />
				</view>
			</view>
		</view>

		<view class="borderTop30">
			<view class="disFlxJS linh-26 px-15 py-5 fz-16 color8 borderB">
				<view class="shrink0 pr-50">诊断证型：</view>
				<view class="color3">{{ info.typesResult }}</view>
			</view>
			<view v-for="(item, index) in info.serviceDetail" :key="index" class="pa-10 mx-15" style="background-color: #f5f5f5">
        <view class="fw-7 pb-10">处方{{ index + 1 }} （RP: 共{{ item.checkItem.length || 0 }}味药）</view>
				<view class="gird pb-10 mb-10" style="border-bottom: solid 1px #999">
					<view v-for="checkItem in item.checkItem" :key="checkItem.itemId">
						<text>{{ checkItem.itemName }}</text>
						<text>{{ checkItem.specsNum }}</text>
						<text>{{ checkItem.unit || "项" }}</text>
					</view>
				</view>
				<view class="linh-24 disFlx">
          <view class="pr-10 shrink0">药品类型: </view>
          <text class="u-error pr-10">{{ getServiceItemsTitle(item.sheetType) }}</text>
          <u-tag v-if="item.sheetType == 4 && (item.dictLabel === '中药饮片' || item.dictLabel === '中药颗粒' || item.dictLabel === '西药')" :text="item.dictLabel" type="warning" size="mini"></u-tag>
        </view>
        <view  class="linh-24 disFlx" v-if="info.dosageformValue && info.dosageformValue == 0">
          <text class="pr-10 shrink0">加工剂型: </text>
          <text>膏方</text>
        </view>
        <view class="linh-24 disFlx">
          <text class="pr-10 shrink0">用法用量: </text>
          <view v-if="info.dosageformValue && info.regulateDosage">
            <text class="px-1">共{{info.regulateDosage.courseNum}}疗程</text>
            <text class="px-1">，{{ item.prescriptNum }}剂</text>
            <text v-if="item.takeType === 1" class="px-1">，口服</text>
            <text v-if="item.takeType === 2" class="px-1">，外用</text>
            <text class="px-1">，每日{{ info.regulateDosage.usageDose }}次</text>
            <text class="px-1">，每次{{ info.regulateDosage.onceDose }}袋/格</text>。
          </view>
          <view v-else>
            <text v-if="item.sheetType == 4 && item.prescriptNum">共 <text class="colorY px-1">{{ item.prescriptNum }}</text> 剂</text>
            <text v-if="item.takeType === 1" class="px-1">，口服</text>
            <text v-if="item.takeType === 2" class="px-1">，外用</text>
            <text v-if="item.usageDose" class="px-1">，每日{{ item.usageDose }}次</text>
            <text v-if="item.usageDose" class="px-1">，每次{{ item.onceDose || 1 }}袋/格</text>
            <text v-if="item.dictLabel === '中药颗粒'">，开水冲泡，待温口服</text>。
          </view>
        </view>
			</view>

			<view class="disFlxJS linh-40 px-15">
				<view class="shrink0 pr-50">医嘱</view>
				<view>{{ info.remark }}</view>
			</view>
		</view>

    <!-- 待审核按钮 -->
		<view v-if="info.apStatus == 0" class="fexdBtn">
			<u-button
				type="error"
				plain
				text="驳回"
				:customStyle="{
					fontSize: '32rpx',
					borderRadius: '20rpx',
					height: '88rpx',
				}"
				:throttleTime="500"
				@click="openModal(2)"
			></u-button>

			<u-button
				type="primary"
				text="通过"
				:customStyle="{
					fontSize: '32rpx',
					borderRadius: '20rpx',
					height: '88rpx',
				}"
				:throttleTime="500"
				@click="openModal(1)"
			></u-button>
		</view>
		<AuditModal ref="AuditModal" :info="info" @refresh="getData" />
    <ImagePreview ref="ImagePreview" />
	</view>
</template>

<script>
import AuditModal from "./auditModal.vue";
import expApi from "@/api/expertIdentity.js";
import dayjs from 'dayjs';
import ImagePreview from '@/components/imagePreview.vue';

export default {
	data() {
		return {
			info: {
				id: "",
			},
		};
	},
	components: {
		AuditModal,
    ImagePreview
	},
	onLoad(options) {
		if (options.id) {
			this.info.id = options.id;
			this.getData();
		}
	},
  onShow() {
    if(this.$store.state.isReset) {
      this.getData();
      this.$store.commit("SET_ISRESET", false);
    }
  },
	methods: {
		async getData() {
			const { data } = await expApi.orderDetails(this.info.id);
			this.info = data;
      // 获取签名
      expApi.getSetUp().then(res=>{
        this.$set(this.info, 'prescriptionSign', res.data.prescriptionSign)
      })
		},
    getServiceItemsTitle(type) {
      switch (Number(type)) {
        case 3:
          return '检验检查'
        case 4:
          return '药品类'
        default:
          return '其他类'
      }
    },
		// 获取订单状态
		sonStatusFind(val, keys) {
      val = val || 0;
			let statusList = [
				{ label: "待审核", value: 0, colors: "#f9ae3d" },
				{ label: "已通过", value: 1, colors: "#20D19A" },
				{ label: "已驳回", value: 2, colors: "#f56c6c" },
			];
			const obj = statusList.find((v) => v.value == val);
			return obj[keys];
		},
    awaitTime (time) {
      const date1 = dayjs()
      const date2 = dayjs(time)
      const _hour = date1.diff(date2, 'hour') // 差异-小时
      const _minute = date1.diff(date2, 'minute') // 差异-分钟
      return {
        minute: _minute,
        desc: `${_hour}小时${_minute%60}分钟`
      }
    },
    openModal(type) {
      this.$refs.AuditModal.open(type);
    },
    openPreview(src) {
      this.$refs.ImagePreview.openModal(src);
    }
	},
};
</script>
<style lang="scss" scoped>
.orderDetailsPage {
	background-color: #ffffff;
	.gird {
		display: grid;
		gap: 20rpx;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.fexdBtn {
		background-color: #ffffff;
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		padding-bottom: 20rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		padding-top: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: grid;
		gap: 30rpx;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		box-shadow: 0 0 20rpx #999;
	}
}
.safeBottom{
  padding-bottom: 150rpx;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 150rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);
}
</style>
